<template>
    <div :class="ivrList.length > 0 ? 'ivr-li-wrap':''">
        <ul class="ivr-list-ul" v-for='(item, index) in ivrList' :key='index'>
            <li class="ivr-list-item">
                <span>{{item.name}}</span>
            </li>
            <li v-for="(nodeItem, nodeIndex) in item.nodes" :key="nodeIndex" class="clearfix">
                <span class="timestamp fl">{{nodeItem.timestamp || nodeItem.intoNodeTime}}</span>
                <div class="ivr-list-right fl">
                    <span class="duration" v-if="nodeItem.duration >= 0">{{nodeItem.duration}}s</span>
                    <span v-if="nodeItem.action"> {{ nodeItem | getActionName}}</span>
                    <span v-else> {{nodeItem.ivrNodeType | getNodeName}} - {{nodeItem.ivrNodeName}}</span>
                    <AudioProgress
                        style="margin-left:20px;"
                        v-if="nodeItem.recordFileUrl"
                        :row="{
                         audioDuration: nodeItem.recordingDuration,
                         _id: nodeIndex + Math.random()
                         }"
                        :showListen="showListen"
                        :showDowload="showDowload"
                        :url="nodeItem.recordFileUrl"
                        :propIsplay="nodeItem.isPlay"
                        @audioClick="restTablePlay"></AudioProgress>
                </div>
            </li>
        </ul>
        <div v-show="ivrList.length <= 0">暂无通话轨迹~</div>
    </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { CallModule } from '@/store/modules/call/index'
import AudioProgress from '@/components/audio/AudioProgress.vue'
@Component({
  name: 'ivr-list',
  components: { AudioProgress },
  filters: {
    getNodeName (type) {
      let typeName = ''
      switch (type) {
        case 'ivr-node-start':
          typeName = '开始节点'
          break
        case 'ivr-node-play':
          typeName = '播放语音节点'
          break
        case 'ivr-node-date':
          typeName = '时间条件节点'
          break
        case 'ivr-node-menu':
          typeName = '按键菜单节点'
          break
        case 'ivr-node-transfer':
          typeName = '转人工节点'
          break
        case 'ivr-node-satisfaction':
          typeName = '转满意度'
          break
        case 'ivr-node-voicemail':
          typeName = '留言节点'
          break
        case 'ivr-node-callurl':
          typeName = '数据交互节点'
          break
        case 'dialoutCallMemory':
          typeName = '外呼记忆'
          break
        case 'ivr-node-collect':
          typeName = '采集收号节点'
          break
        case 'ivr-node-dynamic-route':
          typeName = '分支路由节点'
          break
        default:
          break
      }
      return typeName
    },
    getActionName (item) {
      let typeName = ''
      switch (item.action) {
        case 'incoming':
          typeName = '开始呼叫'
          break
        case 'dialout':
          typeName = '开始呼叫'
          break
        case 'joinQueue':
          typeName = '分配座席'
          break
        case 'ring':
          typeName = '振铃'
          break
        case 'answer':
          typeName = '接听'
          break
        case 'transfer':
          typeName = `转移  ${item.ivrNodeName || ''}`
          break
        case 'consult':
          typeName = `咨询  ${item.ivrNodeName || ''}`
          break
        case 'consultFailed':
          typeName = '咨询失败'
          break
        case 'consultCancel':
          typeName = '取消咨询'
          break
        case 'consultStop':
          typeName = '结束咨询'
          break
        case 'consultResume':
          typeName = '咨询接回'
          break
        case 'consultTransfer':
          typeName = '咨询转移'
          break
        case 'consultThreeWayCall':
          typeName = `三方通话  ${item.ivrNodeName || ''}`
          break
        case 'satisfaction':
          typeName = '转满意度'
          break
        case 'autoDialout':
          typeName = '系统外呼'
          break
        case 'hangup':
          typeName = '挂机'
          break
        case 'joinQueueDialoutMemory':
          typeName = '分配座席 - 外呼记忆'
          break
        case 'joinQueueincommingMemory':
          typeName = '分配座席 - 来电记忆'
          break
        case 'joinQueueBusy':
          typeName = '分配座席 - 座席忙'
          break
        case 'assign':
          typeName = `分配至 - ${item.ivrNodeName || ''}`
          break
        default:
          break
      }
      return typeName
    }
  }
})
export default class IvrList extends Vue {
  @Prop({ default: '' }) private id!: any
  @Prop({ default: false }) private showListen!: boolean
  @Prop({ default: false }) private showDowload!: boolean
  private ivrList: any = []
  private $bus: any
  private restTablePlay (id: string, currentPlay: boolean) { // 点击列表的听取录音，重置其他数据
    this.ivrList.forEach((item: any) => {
      if (item._id === id) {
        item.isPlay = currentPlay
      } else {
        item.isPlay = false
      }
    })
  }

  private getIvrList () {
    if (!this.id) { // 若没有通话id, 不查
      return false
    }
    const query = {
      superUniqueId: this.id
    }
    this.$bus.$emit('restAudioStatus') // 查询的时候，把当前启动的录音重置
    CallModule.getIvrLlst(query).then((res) => {
      if (res && res.success) {
        this.$set(this, 'ivrList', res.data || [])
      }
    })
  }

  @Watch('id', { immediate: true })
  private callDataChange () {
    this.getIvrList()
  }
}
</script>

<style lang='stylus' scoped>
.ivr-li-wrap
  position relative
  padding 6px 0
  &:after
   content ''
   position absolute
   top 0
   bottom 0
   width 1px
   background $c-main
   left 136px
.ivr-list-ul
   padding-bottom 14px
  li
    margin-bottom 16px
  .duration
    padding 3px 4px
    color $c-main
    background #e5f3fd
    border-radius 2px
  .timestamp
    position relative
    width 134px
    color $fc-gray3
    &:after
      content ''
      display inline-block
      width 5px
      height 5px
      border-radius 50%
      background $c-main
      position absolute
      right -5px
  .ivr-list-item
    padding-left 153px
    color $fc-gray2
    font-weight 600
  .ivr-list-right
    padding-left 20px
    color $fc-gray3
</style>
